<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
  <link rel="stylesheet" href="../res/css/weui.css" />
  <link rel="stylesheet" href="../res/css/weuix.css" />
  <!-- <link rel="stylesheet" href="../res/css/common.css" /> -->
  <script src="../res/js/tim/trtc.js"></script>
  <script src="../res/js/zepto.min.js"></script>
  <script src="../res/js/zepto.weui.js"></script>
  <script src="../res/js/common.js?v=1"></script>
  <script src="inquiry_chat.js?v=13"></script>

  <script src="../res/js/tim/purl.js"></script>
  <script src="../res/js/tim/vconsole.min.js"></script>
  <script src="../res/js/tim/GenerateTestUserSig.js"></script>
  <script src="../res/js/tim/lib-generate-test-usersig.min.js"></script>
  <script src="../res/js/tim/imBase.js"></script>
  <script src="../res/js/socket.js"></script>
</head>
<style>
  .fix-top {
    border-bottom: 1px solid #e8e8e8;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
    background: #f6f6f9;
  }

  #btnBack {
    color: #000;
  }

  .chat_box div p {
    font-size: 14px;
    line-height: 20px;
  }

  .show {
    width: 100%;
  }

  .noFind {
			width: 100%;
			margin: 50px 0px;
			display: block;
			text-align: center;
			overflow: hidden;
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #353535;
			background-color: #F9F8FE;
      padding: 10px 0;
      height: 100vh;
		}

		.noFind img {
			width: 198px;
			height: 158px;
			border: none;
			border-radius: 0px;
			margin: 15px;
		}
</style>
<script>
  $(function () {
    var doctor_imid = getQst("doctorIm");
    var patientIM = getQst("userIm");
    var logId = getQst("logId");
    console.log(logId);
    //点击返回
    $("#btnBack").click(() => {
      goPageNo(-1);
    });
    var patientImg, doctorHeadImg, patientName, doctorName; //患者和医生信息
    //获取医生和患者信息
    function getAllInfo() {
      var paramJson = {
        id: logId,
      };
      newAjaxPost("/h5/inquiryLog/getAllInfo", paramJson, (json) => {
        var data = json.data;
        doctorHeadImg = data.doctorHeadImg;
        patientImg = data.patientImg;
        patientName = data.patientName;
        doctorName = data.doctorName;
        isCompleted = data.isCompleted;
      });
    }

    getAllInfo();

    //获取历史聊天信息,渲染
    function getHistoryMsg() {
      var params = {
        friendId: doctor_imid,
        id: "",
        userId: patientIM,
      };
      newAjaxPost(
        "/h5/dectorEndInquiry/getChatRecordList",
        params,
        getHistoryMsgOk
      );
    }

    function getHistoryMsgOk(res) {
      console.log(res);
      var onemsg = "";
      var history = res.data;
      if (history.length > 0) {
        for (var i = 0; i < history.length; i++) {
          if (history[i].userId == patientIM) {
            //自己发的信息
            if (history[i].msgType == 3) {
              //自己发图片

              onemsg +=
                '<div class="onemsgUser1" style="float: right; width: 100%;padding-right: 5px;" id="' +
                history[i].userId +
                '">';
              onemsg +=
                '	<div class="msgImgDiv" style="float: right; padding: 16px 0px;">';
              onemsg +=
                '		<img class="msgImg" src = "' +
                patientImg +
                '" style="width: 30px;"></img>';
              onemsg += "	</div>";
              onemsg +=
                '	<div class="msgPDiv" style="float: right; background: #2b73cc; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px; max-width: 80%;">';
              if (history[i].msgUserName == null) {
                onemsg +=
                  '		<p class="msghead" style="color:white;">[' +
                  patientName +
                  "]" +
                  history[i].msgDate +
                  "</p>";
              } else {
                onemsg +=
                  '		<p class="msghead" style="color:white;">[' +
                  patientName +
                  "]" +
                  history[i].msgDate +
                  "</p>";
              }
              onemsg += '		<p class="msgbody">';
              onemsg +=
                '			<img class="msgImg openBig" src="' +
                history[i].msgText +
                '" style="width:200px"></img>';
              onemsg += "		</p>";
              onemsg += "	</div>";
              onemsg += "</div>";
            } else if (history[i].msgType == 0) {
              //自己发消息
              onemsg +=
                '<div class="onemsgUser1" style="float: right; width: 100%;padding-right: 5px;" id="' +
                history[i].userId +
                '">';
              onemsg +=
                '	<div class="msgImgDiv" style="float: right; padding: 16px 0px;">';
              onemsg +=
                '		<img class="msgImg" src = "' +
                patientImg +
                '" style="width: 30px;"></img>';
              onemsg += "	</div>";
              onemsg +=
                '	<div class="msgPDiv" style="float: right; background: #2b73cc; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px; max-width: 80%;position: relative;">';
              if (history[i].msgUserName == null) {
                onemsg +=
                  '		<p class="msghead" style="color:white;">[' +
                  patientName +
                  "]" +
                  history[i].msgDate +
                  "</p>";
              } else {
                onemsg +=
                  '		<p class="msghead" style="color:white;">[' +
                  history[i].msgUserName +
                  "]" +
                  history[i].msgDate +
                  "</p>";
              }

              onemsg += '		<p class="msgbody">';
              onemsg +=
                '			<pre style="white-space: pre-wrap; white-space:pre-line; word-wrap: break-word; width: 100%; overflow: hidden;color:white;">' +
                history[i].msgText +
                "</pre>";
              onemsg += "		</p>";
              onemsg += "	</div>";
              onemsg += "</div>";
            } else if (history[i].msgType == 4) {
              onemsg +=
                '<div class="onemsgUser1" style="float: right; width: 100%;padding-right: 5px;" id="' +
                history[i].userId +
                '">';
              onemsg +=
                '	<div class="msgPDiv" style="background: #EFF3F4; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px auto;text-align: center; font-size: 12px; max-width: 60%;">';
              onemsg +=
                '			<pre style="white-space: pre-wrap; white-space:pre-line; word-wrap: break-word; width: 100%; overflow: hidden;">' +
                history[i].msgText +
                "</pre>";
              onemsg += "	</div>";
              onemsg += "</div>";
            } else if (history[i].msgType == 6) {
              if (
                history[i].msgText.indexOf(
                  "和患病时长【起病至就诊的时间】"
                ) != -1
              ) {
                onemsg +=
                  '<div class="onemsg" style="float: left; width: 98%;padding-left: 5px;" id="' +
                  history[i].id +
                  '">';
                onemsg +=
                  '	<div class="msgImgDiv" style="float: left; padding: 16px 0px;">';
                onemsg += `		<img class="msgImg" src =${doctorHeadImg} style="width: 30px;"></img>`;
                onemsg += "	</div>";
                onemsg +=
                  '	<div class="msgPDiv" style="float: left; background: #EFF3F4; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px; max-width: 80%;">';
                onemsg +=
                  '		<p class="msghead" style="color:black;">[' +
                  doctorName +
                  "]" +
                  history[i].msgDate +
                  "</p>";
                onemsg += '		<p class="msgbody">';
                onemsg +=
                  '			<pre style="white-space: pre-wrap; white-space:pre-line; word-wrap: break-word; width: 100%; overflow: hidden;font-size: 15px;font-family: PingFang SC;font-weight: 500;color: #353535;">' +
                  history[i].msgText +
                  "</pre>";
                onemsg += "		</p>";
                onemsg += "	</div>";
                onemsg += "</div>";
              } else if (
                history[i].msgText.indexOf("回答完毕记得点击下方【已完成") !=
                -1
              ) {
                onemsg +=
                  '<div class="onemsg" style="float: left; width: 98%;padding-left: 5px;" id="' +
                  history[i].id +
                  '">';
                onemsg +=
                  '	<div class="msgImgDiv" style="float: left; padding: 16px 0px;">';
                onemsg += `		<img class="msgImg" src =${doctorHeadImg} style="width: 30px;"></img>`;
                onemsg += "	</div>";
                onemsg +=
                  '	<div class="msgPDiv" style="float: left; background: #EFF3F4; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px; max-width: 80%;">';
                onemsg +=
                  '		<p class="msghead" style="color:black;">[' +
                  doctorName +
                  "]" +
                  history[i].msgDate +
                  "</p>";
                onemsg += '		<p class="msgbody">';
                onemsg +=
                  '			<pre style="white-space: pre-wrap; white-space:pre-line; word-wrap: break-word; width: 100%; overflow: hidden;font-size: 15px;font-family: PingFang SC;font-weight: 500;color: #353535;">' +
                  history[i].msgText +
                  "</pre>";
                onemsg +=
                  '<p style="width:20%;text-align: center;background: #1189FF;border-radius: 6px;font-size: 14px;font-family: PingFang SC;font-weight: bold;color: #FEFEFE;margin:5px 0;padding:5px 2px" id="isFinish"inquiryLogId='+history[i].inquiryLogId+'>已完成</p>';
                onemsg += "		</p>";
                onemsg += "	</div>";
                onemsg += "</div>";
              } else if (
                history[i].msgText.indexOf("您可选择离线等待本次问诊哦！") !=
                -1
              ) {
                onemsg +=
                  '<div class="onemsg" style="float: left; width: 98%;padding-left: 5px;" id="' +
                  history[i].id +
                  '">';
                onemsg +=
                  '	<div class="msgImgDiv" style="float: left; padding: 16px 0px;">';
                onemsg += `		<img class="msgImg" src =${doctorHeadImg} style="width: 30px;"></img>`;
                onemsg += "	</div>";
                onemsg +=
                  '	<div class="msgPDiv" style="float: left; background: #EFF3F4; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px; max-width: 80%;">';
                onemsg +=
                  '		<p class="msghead" style="color:black;">[' +
                  doctorName +
                  "]" +
                  history[i].msgDate +
                  "</p>";
                onemsg += '		<p class="msgbody">';
                onemsg +=
                  '			<pre style="white-space: pre-wrap; white-space:pre-line; word-wrap: break-word; width: 100%; overflow: hidden;font-size: 15px;font-family: PingFang SC;font-weight: 500;color: #353535;">' +
                  history[i].msgText +
                  "</pre>";
                onemsg += "		</p>";
                onemsg += "	</div>";
                onemsg += "</div>";
              } else if (history[i].msgText.indexOf("结束问诊") != -1) {
                onemsg +=
                  '<div class="onemsg" style="float: left; width: 98%;padding-left: 5px;" id="' +
                  history[i].id +
                  '">';
                onemsg +=
                  '	<div class="msgImgDiv" style="float: left; padding: 16px 0px;">';
                onemsg += `		<img class="msgImg" src =${doctorHeadImg} style="width: 30px;"></img>`;
                onemsg += "	</div>";
                onemsg +=
                  '	<div class="msgPDiv" style="float: left; background: #EFF3F4; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px; max-width: 80%;">';
                onemsg +=
                  '		<p class="msghead" style="color:black;">[' +
                  doctorName +
                  "]" +
                  history[i].msgDate +
                  "</p>";
                onemsg += '		<p class="msgbody">';
                onemsg +=
                  '			<pre style="white-space: pre-wrap; white-space:pre-line; word-wrap: break-word; width: 100%; overflow: hidden;font-size: 15px;font-family: PingFang SC;font-weight: 500;color: #353535;">' +
                  history[i].msgText +
                  "</pre>";
                onemsg += "		</p>";
                onemsg += "	</div>";
                onemsg += "</div>";
              }
            }
          } else {
            //对方发的信息
            if (history[i].msgType != 4) {
              onemsg +=
                '<div class="onemsg" style="float: left; width: 98%;padding-left: 5px;" id="' +
                history[i].userId +
                '">';
              onemsg +=
                '	<div class="msgImgDiv" style="float: left; padding: 16px 0px;">';
              onemsg +=
                '		<img class="msgImg" src = "' +
                doctorHeadImg +
                '" style="width: 30px;"></img>';
              onemsg += "	</div>";
              onemsg +=
                '	<div class="msgPDiv" style="float: left; background: #EFF3F4; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px; max-width: 80%;">';
              onemsg +=
                '		<p class="msghead" style="color:black;">[' +
                doctorName +
                "]" +
                history[i].msgDate +
                "</p>";
              onemsg += '		<p class="msgbody">';
              if (history[i].msgType == 3) {
                onemsg +=
                  '			<img class="msgImg openBig" src="' +
                  history[i].msgText +
                  '" style="width:200px"></img>';
              } else {
                onemsg +=
                  '<pre style="white-space: pre-wrap; white-space:pre-line; word-wrap: break-word; width: 100%; overflow: hidden;">' +
                  history[i].msgText +
                  "</pre>";
              }
              if (
                history[i].msgText.indexOf("请等待药师审核") != -1 || history[i].msgText.indexOf("药师已审核通过") != -1
              ) {
                onemsg +=
                  `<p style="font-size: 15px;font-family: PingFang SC;font-weight: 500;color: #1189FF;" class="goList" inquiryLogId=${history[i].inquiryLogId}>查看处方等清单></p>`;
              }
              onemsg += "		</p>";
              onemsg += "	</div>";
              onemsg += "</div>";
            } else if (history[i].msgType == 4) {
              console.log(history[i].msgText);
              onemsg +=
                '<div class="onemsg" style="float: left; width: 98%;padding-left: 5px;" id="' +
                history[i].userId +
                '">';
              onemsg +=
                '	<div class="msgPDiv" style="background: #EFF3F4; border: 1px solid #EFF3F4; border-radius: 7px; padding: 4px; margin: 7px auto;text-align: center; font-size: 12px; max-width: 60%;">';
              onemsg +=
                '			<pre style="white-space: pre-wrap; white-space:pre-line; word-wrap: break-word; width: 100%; overflow: hidden;">' +
                history[i].msgText +
                "</pre>";
              onemsg += "	</div>";
              onemsg += "</div>";
            }
          }
        }
        var msgflow = document.getElementById("chat_Log");
        $("#chat_Log").append(onemsg);

        console.log(isCompleted);

        var finishBtn = document.querySelectorAll("#isFinish");
        if (isCompleted == 1) {
          //已经填了已完成
          finishBtn.forEach((item, index) => {
            item.style.background = "#F6F6F6";
            item.style.color = "#1189FF";
            item.click = null;
          });
        } else {
          //点击发送已完成信息
          var time = formatDate(new Date());
          finishBtn.forEach((item, index) => {
            // if (index == (finishBtn.length - 1)) {
            //   console.log(1);
            //   item.addEventListener('click', () => {
            //     wsConnection.send(30, {
            //       "logId": log_id, //问诊id
            //       "userIm": patientIM, // 患者im
            //       "doctorIm": doctor_imid, // 医生imID		
            //     })
            //     wsConnection.send(3, {
            //       'msgText': "医生已经收到您的信息啦~若医生还没回复，您可选择离线等待本次问诊哦！", // 信息体
            //       'friendId': patientIM, // 患者imID
            //       'inquiryLogId': log_id, //问诊id
            //       'msgusername': truename, //医生名字
            //       'msgType': 6,
            //       'msgDate': time
            //     })
            //     item.style.background = '#F6F6F6'
            //     item.style.color = '#1189FF'
            //     item.click = null;
            //     location.reload()
            //   })
            // } else {
              item.style.background = "#F6F6F6";
              item.style.color = "#1189FF";
              item.click = null;
            // }
          })
        }

        $(".goList").click(function () {
          var inquiryLogId = $(this).attr("inquiryLogId");
          console.log(inquiryLogId);
          goPage(
            "my_prescription_list.htm?logId=" + inquiryLogId
          );
        });

        // 300ms后,等待图片加载完，滚动条自动滚动到底部
        setTimeout(function () {
          msgflow.scrollTop = msgflow.scrollHeight;
          $(".openBig").on("click", function () {
            var imgsrc = $(this)[0].src;
            $(".show").attr("src", imgsrc);
            $(".img_mask").addClass("weui-mask--visible");
            $(".img_dialog").addClass("weui-dialog--visible");
          });
          $(".close_img").on("click", function () {
            $(".img_mask").removeClass("weui-mask--visible");
            $(".img_dialog").removeClass("weui-dialog--visible");
          });
        }, 300);
      }
      else{
        $(".noFind").show(); 
      }
    }

    getHistoryMsg();
  });
</script>

<body>
  <div class="fix-top" style="z-index: 100">
    <div class="weui-btn_primary weui-header" style="background: #fff !important">
      <div class="weui-header-left">
        <a id="btnBack" class="icon icon-109"></a>
      </div>
      <h1 class="weui-header-title" style="color: #000">问诊记录</h1>
      <div class="weui-header-right"></div>
    </div>
  </div>
  <div id="divChatMain" style="position: absolute; top: 50px">
    <div id="divChatLog">
      <div id="chat_Log" class="chat_box" style="height: 94vh; overflow-y: auto"></div>
    </div>
  </div>
  <div class="weui-cell noFind" style="display: none;"><img src="../res/images/img_empty_state@2x.png" alt="">
    <p>查无聊天记录~</p>
  </div>
  <!-- 点击放大图片 -->
  <div class="weui-mask img_mask close_img" style="opacity: 1"></div>
  <div class="weui-dialog img_dialog close_img" style="opacity: 1">
    <img class="show" src="" />
  </div>
</body>

</html>